<template>
	<view class="app-container">
		<u-navbar title="慧拍房" :autoBack="false" placeholder bgColor="#cf141a"
			:titleStyle="{ fontSize: '40rpx',color: '#fff' }">
			<view class="u-nav-slot" slot="left"></view>
		</u-navbar>
		<view class="search-item flex flex-align-center flex-justify-center">
			<u-search placeholder="房源标题或小区名称" v-model="keyword" animation :clearabled="true" bgColor="#fff"
				:actionStyle="{ color: '#fff' }" height="70rpx" @custom="keywordCustom"
				@clear="keywordClear"></u-search>
		</view>
		<u-swiper :list="swiper" keyName="feng_img" showTitle :autoplay="false" circular height="350rpx"></u-swiper>
		<view class="nav-item flex">
			<view class="item" @click="$toPath.goPage('pages/listings/list', {title: '住宅',type: '0'})">
				<u--image :showLoading="true" src="https://www.huipaifang.com/address/zhuzhai.png" width="98rpx"
					height="98rpx"></u--image>
				<u--text text="住宅" block align="center" color="#333333" size="26rpx" margin="15rpx 0 0"></u--text>
			</view>
			<view class="item" @click="$toPath.goPage('pages/listings/list', {title: '商业',type: '1'})">
				<u--image :showLoading="true" src="https://www.huipaifang.com/address/shangye.png" width="98rpx"
					height="98rpx"></u--image>
				<u--text text="商业" block align="center" color="#333333" size="26rpx" margin="15rpx 0 0"></u--text>
			</view>
			<view class="item" @click="$toPath.goPage('pages/listings/list', {title: '工业',type: '2'})">
				<u--image :showLoading="true" src="https://www.huipaifang.com/address/gongye.png" width="98rpx"
					height="98rpx"></u--image>
				<u--text text="工业" block align="center" color="#333333" size="26rpx" margin="15rpx 0 0"></u--text>
			</view>
			<view class="item" @click="$toPath.goPage('pages/listings/list', {title: '推荐房源',tuijian: '1'})">
				<u--image :showLoading="true" src="https://www.huipaifang.com/address/tuijian.png" width="98rpx"
					height="98rpx"></u--image>
				<u--text text="推荐房源" block align="center" color="#333333" size="26rpx" margin="15rpx 0 0"></u--text>
			</view>
		</view>
		<view class="statistics-item">
			<view class="_title flex flex-align-center">
				<u--image :showLoading="true" src="/static/home/statistics-icon.png" width="29rpx"
					height="28rpx"></u--image>
				<u--text text="房源数据统计" block align="left" color="#363a3c" size="32rpx" margin="0 17rpx 0"></u--text>
			</view>
			<view class="total flex">
				<view class="item" @click="$toPath.goPage('pages/listings/list', {title: '预告中',status: '0'})">
					<u--text :text="houseForm.zong_house" block align="center" bold color="#cf141a" size="36rpx"
						margin="0"></u--text>
					<u--text text="即将开始总数" block align="center" color="#4e4e4e" size="24rpx"
						margin="10rpx 0 0"></u--text>
				</view>
				<view class="item" @click="$toPath.goPage('pages/listings/list', {title: '进行中',status: '1'})">
					<u--text :text="houseForm.success" block align="center" bold color="#cf141a" size="36rpx"
						margin="0"></u--text>
					<u--text text="正在拍卖总数" block align="center" color="#4e4e4e" size="24rpx"
						margin="10rpx 0 0"></u--text>
				</view>
				<view class="item" @click="$toPath.goPage('pages/listings/list', {title: '已结束',status: '2'})">
					<u--text :text="houseForm.error" block align="center" bold color="#cf141a" size="36rpx"
						margin="0"></u--text>
					<u--text text="拍卖结束总数" block align="center" color="#4e4e4e" size="24rpx"
						margin="10rpx 0 0"></u--text>
				</view>
			</view>
		</view>
		<view class="statistics-item">
			<view class="_title flex flex-align-center">
				<u--image :showLoading="true" src="/static/home/news-icon.png" width="37rpx" height="23rpx"></u--image>
				<u--text text="最新法拍房源" block align="left" color="#363a3c" size="32rpx" margin="0 17rpx 0"></u--text>
			</view>
		</view>
		<view style="margin: 20rpx 24rpx 0">
			<u-tabs :list="tabs.list" @change="tabsChange" :current="tabs.current"
				:inactiveStyle="{ color: '#6e6e6e', fontSize: '38rpx' }"
				:activeStyle="{ color: '#cf141a', fontSize: '38rpx' }" lineColor="#cf141a" lineHeight="10rpx"></u-tabs>
		</view>
		<z-paging ref="paging" to-bottom-loading-more-enabled v-model="dataList" :auto-full-height="false"
			use-page-scroll :fixed="false" @query="queryList" :auto="false">
			<view slot="loadingMoreNoMore">
				<u--text :text="tip_text1" block align="center" color="#6e6e6e" size="24rpx"></u--text>
				<u--text :text="tip_text2" block align="center" color="#6e6e6e" margin="10rpx 0 0"
					size="24rpx"></u--text>
			</view>
			<view class="goods-list">
				<view class="list-item" v-for="(item, index) in dataList" :key="index"
					@click="$toPath.goPage('pages/listings/details', { id: item.id })">
					<view class="list-info flex">
						<u--image :showLoading="true" :src="item.img" width="246rpx" height="230rpx"></u--image>
						<view class="info">
							<u--text :text="item.title" :lines="2" block color="#000000" size="28rpx"></u--text>
							<view class="label flex">
								<u--text v-if="item.square !== '0'" :text="item.square" block align="left"
									color="#717171" size="28rpx"></u--text>
								<u--text v-if="item.structure !== '0'" :text="item.structure" block align="left"
									color="#717171" size="28rpx"></u--text>
							</view>
							<view class="price-item">
								<view class="item flex">
									<u--text text="起拍价" block align="left" color="#6e6e6e" size="24rpx"></u--text>
									<u--text :text="item.start_price" block align="left" color="#cf141a" size="28rpx"
										margin="0 10rpx 0"></u--text>
								</view>
								<view class="item flex">
									<u--text text="评估价" block align="left" color="#6e6e6e" size="24rpx"></u--text>
									<u--text :text="item.evaluate_price" block align="left" color="#cf141a" size="28rpx"
										margin="0 10rpx 0"></u--text>
								</view>
							</view>
						</view>
					</view>
					<view class="list-mode flex flex-between flex-align-center">
						<view class="count-item flex">
							<block v-if="item.status === '1' || item.status === '0'">
								<u--text :text="item.status === '0' ? '开拍时间：' : '结束时间：'" block align="left"
									color="#606060" size="26rpx"></u--text>
								<liu-countdown ref="countdown" :showSeconds="true" mode="2"
									:endDate="item.countdown_time" :auto="true"></liu-countdown>
							</block>
						</view>
						<view class="status flex flex-align-center flex-justify-center"
							:class="item.status === '1' ? 'error' : item.status === '0' ? 'succeed' : 'finish'">
							{{ item.status === '1' ? '正在拍卖' : item.status === '0' ? '即将开拍' : '拍卖结束' }}
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		mixins: [ZPMixin],
		data() {
			return {
				keyword: '',
				swiper: [],
				tabs: {
					list: [{
							name: '正在进行',
							type: 0
						},
						{
							name: '一拍',
							type: 1
						},
						{
							name: '二拍',
							type: 2
						},
						{
							name: '变卖',
							type: 3
						}
					],
					current: 0
				},
				houseForm: {
					error: 0,
					success: 0,
					zong_house: 0
				},
				dataList: [],
				timeData: {},
				tip_text1: '',
				tip_text2: ''
			};
		},
		onLoad() {
			this.apiHouseNum();
			this.apiIndexLunbo();
			this.queryList(1);
		},
		methods: {
			onChange(e) {
				this.timeData = e;
			},
			keywordClear(event) {
				this.$refs.paging.reload(false);
			},
			keywordCustom(event) {
				this.$refs.paging.reload(false);
			},
			tabsChange(e) {
				this.tabs.current = e.index;
				this.$refs.paging.reload(false);
			},
			apiHouseNum() {
				this.$api.apiHouseNum().then((res) => {
					console.log(res.house_list);
					this.houseForm = res.house_list;
				});
			},
			apiIndexLunbo() {
				this.$api.apiIndexLunbo().then((res) => {
					console.log(res.info);
					this.swiper = res.info;
				});
			},
			queryList(pageNo) {
				this.$api
					.apiHouseList({
						page: pageNo,
						flag: this.tabs.list[this.tabs.current].type,
						keyword: this.keyword
					})
					.then((res) => {
						this.$refs.paging.complete(res.house_list);
						this.tip_text1 = res.tip_text1
						this.tip_text2 = res.tip_text2
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.app-container {
		.search-item {
			height: 194rpx;
			background: #cf141a;
			padding: 0 80rpx;
		}

		.nav-item {
			margin-top: 36rpx;
			justify-content: space-around;
		}

		.statistics-item {
			margin: 45rpx 24rpx 0;

			.total {
				margin-top: 50rpx;

				.item {
					flex: 1;
					border-left: 3rpx solid #bfbfbf;
					box-sizing: border-box;

					&:first-child {
						border-left: none;
					}
				}
			}
		}

		.statistics-item {
			margin: 50rpx 24rpx 0;
		}
	}
</style>